<script>
import axios from "axios";
import {getToken} from "@/store/token";
import addAddress from "@/components/addAddress.vue";
import updateAddr from "@/components/updateAddr.vue"

export default {
  name: "myAddress",
  components: {addAddress, updateAddr},
  data() {
    return {
      activeName: "first",
      //搜索关键字
      keyword: '',
      //表单中的地址
      form: {
        name: '',
        address: '',
        phone: '',
        tag: '',
        userId: ''
      },
      state: {
        updateForm: {},
        page: 1,
        size: 2,
        total: 0
      },
      updateFormVisible: false,
      addFormVisible: false,
      //后端获取的地址列表
      addressList: {},
    }
  },
  methods: {
    search() {
      this.getAddress()
    },
    openEditDialog(item) {
      this.state.updateForm = item;
      this.updateFormVisible = true;
    },
    openAddDialog() {
      this.addFormVisible = true;
    },
    myAddrVisible(val) {
      this.addFormVisible = val
      this.updateFormVisible = val
      this.getAddress()
    },
    deleteAddress(item) {
      this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.address.deleteAddressById(item.id)
            .then((res) => {
              var data = res.data;
              if (data.success) {
                this.$message.success(data.message)
                this.state.page = 1;
                this.getAddress();
                this.addFormVisible = false
              } else {
                this.$message.error(data.message);
              }
            }).catch((resp) => {
          this.$message.error('服务器访问失败' + resp);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getAddress() {
      this.$api.address.getAddress(
          this.state.page,
          this.state.size,
          this.form.userId,
          this.keyword
      ).then((res) => {
        var data = res.data;
        if (data.success) {
          this.addressList = data.content
          this.state.total = Number(data.total)
        } else {
          this.$message.error(data.message);
        }
      }).catch((resp) => {
        this.$message.error('服务器访问失败' + resp);
      })
    }
  },
  mounted() {
    this.form.userId = JSON.parse(getToken("user")).id;
    this.getAddress();
  }
}
</script>

<template>
  <div style="position: relative">
    <span style="font-size: 18px;">常用地址</span>
    <el-tabs v-model="activeName">
      <el-tab-pane label="我的地址" name="first">
        <div style="display: inline-flex;margin: 0 10px 10px;">
          <el-input
              v-model="keyword"
              placeholder="请输入姓名/手机号/详细地址"
              prefix-icon="el-icon-search"
              style="width: 800px;margin-right: 10px"
              clearable
              @clear="search"
              @keydown.enter.native="search"></el-input>
          <el-button
              icon="el-icon-search"
              type="primary"
              @click="search">
            搜索
          </el-button>
        </div>
        <div class="address-body">
          <div style="height: 340px">
            <div class="address-container" v-for="item in this.addressList">
              <div class="address-left">
                <div style="display:flex;">
                  <div class="el-icon-s-custom" style="color:#e5e5e5;"></div>
                  <div
                      style="overflow: hidden;height: 20px; width: 60px; ;margin-left: 10px;word-break: break-all;">
                    <span>{{ item.name }}</span>
                  </div>
                </div>
                <el-tag type="info" style="width: 50px;">{{ item.tag }}</el-tag>
              </div>
              <div>
                <ul>
                  <li><span class="address-title">收货人：</span><span>{{ item.name }}</span></li>
                  <li><span class="address-title">地址：</span><span>{{ item.address }}</span></li>
                  <li><span class="address-title">电话：</span><span>{{ item.phone }}</span></li>
                </ul>
              </div>
              <div class="el-icon-error" style="position: absolute;top: 10px;right: 20px;"
                   @click="deleteAddress(item)"></div>
              <div class="address-edit" @click="openEditDialog(item)">编辑</div>
            </div>
          </div>
          <div style="width: 300px;margin: 0 auto" v-if="state.total>2">
            <el-pagination
                background
                @current-change="getAddress"
                :current-page.sync="state.page"
                :page-size="state.size"
                layout="prev, pager, next"
                :total="state.total">
            </el-pagination>
          </div>

        </div>
      </el-tab-pane>
    </el-tabs>
    <div style="position: absolute; top: 20px;right: 10px;">
      <el-button type="success" @click="openAddDialog">新增</el-button>
    </div>
    <updateAddr v-if="updateFormVisible" @changeVal="myAddrVisible" :updateForm="state.updateForm"></updateAddr>
    <addAddress v-if="addFormVisible" @changeVal="myAddrVisible"></addAddress>
  </div>
</template>

<style scoped>
ul {
  list-style: none;
}

.address-body {
  height: 400px;

}

.address-container {
  position: relative;
  display: flex;
  margin: 15px;
  padding: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.10), 0 -1px 5px 0 rgba(0, 0, 0, 0.10);
}

.address-left {
  width: 160px;
  height: 120px;;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-right: 1px dotted grey;
}

.address-title {
  display: inline-block;
  width: 100px;
  font-size: 14px;
  color: #999999;
  text-align: right;

}

.address-edit {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 14px;
  color: #18AE66;
  cursor: pointer
}
</style>